

In [1]:

    
from bokeh.io import output_notebook, show
from IPython.core.display import Image, HTML
output_notebook()









    





    
        
        Loading BokehJS ...
    
    Warning: Requesting CDN BokehJS version '0.11.1' from Bokeh development version '0.11.1-159-g9220f7f'. This configuration is unsupported and may not work!

In an jupyter notebook if your bokeh tooltips extend beyond the extent of your plot, the css from the jupyter notebook can interfere with the display leaving something like this (note this is a screenshot not the fixed plot (which is at bottom of this notebook):



In [4]:

    
Image(url="https://raw.githubusercontent.com/birdsarah/bokeh-miscellany/master/cut-off-tooltip.png", width=400, height=400)









    Out[4]:

Unfortunately Bokeh can't solve this as Bokeh can't control the CSS of the parent element, which belongs to Jupyter. This can be solved in two ways:

You can apply a style to a single notebook
You can add custom css to your global notebook settings

1. Applying CSS to single Jupyter Notebook



In [5]:

    
from IPython.core.display import HTML
HTML("""
<style>
  div.output_subarea {
    overflow-x: visible;
  }
</style>
""")









    Out[5]:



In [12]:

    
from bokeh.plotting import figure, ColumnDataSource
from bokeh.models import HoverTool

source = ColumnDataSource(
        data=dict(
            x=[1, 2, 3, 4, 5],
            y=[2, 5, 8, 2, 7],
            desc=['A', 'b', 'C', 'd', 'E'],
            imgs = [
                'http://bokeh.pydata.org/static/snake.jpg',
                'http://bokeh.pydata.org/static/snake2.png',
                'http://bokeh.pydata.org/static/snake3D.png',
                'http://bokeh.pydata.org/static/snake4_TheRevenge.png',
                'http://bokeh.pydata.org/static/snakebite.jpg'
            ]
        )
    )

hover = HoverTool(
        tooltips="""
        <div>
            <div>
                <img
                    src="@imgs" height="42" alt="@imgs" width="42"
                    style="float: left; margin: 0px 15px 15px 0px;"
                    border="2"
                ></img>
            </div>
            <div>
                <span style="font-size: 17px; font-weight: bold;">@desc</span>
                <span style="font-size: 15px; color: #966;">[$index]</span>
            </div>
            <div>
                <span style="font-size: 15px;">Location</span>
                <span style="font-size: 10px; color: #696;">($x, $y)</span>
            </div>
        </div>
        """
    )

p = figure(plot_width=200, plot_height=200, tools=[hover], title='Hover')
p.circle('x', 'y', size=20, source=source)

show(p)









    






    







    Out[12]:




<Bokeh Notebook handle for In[12]>

2. Adding to global settings

Add the following to your custom.css file in your settings (~/.jupyter/custom/custom.css)

div.output_subarea {
    overflow-x: visible;
  }

See for more information on both: http://stackoverflow.com/a/34742362/1415130



In [ ]: